<template>
  <div class="app-container">
    <div class="search">
      <p class="float-left mr-10 mb-10" style="width: 200px">
        <el-input v-model="searchParams.name" placeholder="输入名称"></el-input>
      </p>
      <p class="float-left mr-10 mb-10">
        <el-button type="primary" @click="searchRole(true)">搜索</el-button>
        <el-button type="primary" @click="resetRole">重置</el-button>
      </p>
    </div>
    <div class="my-10">
      <el-button type="primary" @click="addRole">新增角色</el-button>
    </div>
    <el-row :gutter="15">
      <!--角色管理-->
      <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="17" style="margin-bottom: 10px">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="role-span">角色列表</span>
          </div>
          <bdTable
            :tableHeader="tableHeader"
            :tableData="tableData"
            class="mb-10"
            @cell-click="cellClick"
          />
          <bd-page
            :pageSize="pages"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></bd-page>
        </el-card>
      </el-col>
      <!-- 菜单授权 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="7">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <el-tooltip class="item" effect="dark" content="选择指定角色分配菜单" placement="top">
              <span class="role-span">菜单分配</span>
            </el-tooltip>
            <el-button
              size="mini"
              style="float: right; padding: 6px 9px"
              type="primary"
              @click="saveMenu"
            >保存</el-button>
          </div>
          <el-tree
            ref="tree"
            :data="tree.data"
            :default-checked-keys="tree.menuIds"
            :props="tree.props"
            accordion
            show-checkbox
            check-strictly
            node-key="id"
            @check="menuChange"
          />
        </el-card>
      </el-col>
    </el-row>
    <addRoleAndEditRole ref="roleInfo" @update:visible="searchRole(true)" />
  </div>
</template>
<script>
import addRoleAndEditRole from './addRoleAndEditRole'
import { getRole, delRole, saveRoleSave, queryRole } from '@/api/roles'
import { queryPermissionTree } from '@/api/menus'
export default {
  name: '',
  components: {
    addRoleAndEditRole
  },
  data () {
    return {
      tree: {
        data: [],
        menuIds: [],
        props: {
          label: 'name',
          children: 'children'
        }
      },
      searchParams: {
        name: ''
      },
      tableHeader: {
        type: 'selection',
        highlight: true,
        header: [
          {
            prop: 'name',
            label: '角色名称'
          },
          {
            prop: 'createTime',
            label: '创建日期'
          },
          {
            label: '操作',
            type: 'button',
            width: 150,
            btn: [
              {
                id: 1,
                name: '编辑',
                handler: this.handleEdit
              },
              {
                id: 2,
                name: '删除',
                type: 'danger',
                handler: this.handleDelete
              }
            ]
          }
        ]
      },
      tableData: [],
      // 分页
      pages: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      // 给角色绑定菜单
      permissionIds: [],
      tableCellSelect: null
    }
  },
  // 计算属性
  computed: {},
  watch: {},
  mounted () {
    this.searchRole()
    this.treeList()
  },
  methods: {
    // 右侧树
    async treeList () {
      const data = await queryPermissionTree({ clientCode: 1 })
      this.tree.data = data
    },
    menuChange (checkedNodes, { checkedKeys }) {
      this.permissionIds = checkedKeys
    },
    // 搜索角色
    async searchRole (clearPage = false) {
      if (clearPage) {
        this.pages.page = 1
        this.pages.pageSize = 10
      }
      const params = {
        ...this.pages,
        ...this.searchParams
      }
      const { total, list } = await getRole(params)
      this.tableData = list
      this.total = total
    },
    // 重置
    resetRole () {
      this.searchParams.name = ''
      this.searchRole(true)
    },
    // 新增角色
    addRole () {
      this.$refs.roleInfo.isShow()
    },
    // 编辑角色
    handleEdit (e, row) {
      this.$refs.roleInfo.isShow(row, true)
    },
    // 删除角色
    handleDelete (e, row) {
      this.$confirm('此操作将删除角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delRole({ roleId: row.id })
        this.resetRole()
      }).catch(() => {
        row.isHot = !row.isHot
      })
    },
    // 条数
    handleSizeChange (val) {
      this.pages.pageSize = val
      this.searchRole()
    },
    // 页数
    handleCurrentChange (val) {
      this.pages.page = val
      this.searchRole()
    },
    // 点击列
    async cellClick (row) {
      this.$refs.tree.setCheckedKeys([])
      this.tableCellSelect = row
      const data = await queryRole({ roleId: row.id })
      this.$refs.tree.setCheckedKeys(data.permissionIds)
    },
    // 保存
    async saveMenu () {
      if (!this.tableCellSelect) {
        return this.$notify({
          title: '请点击左侧列表选择角色',
          type: 'error',
          duration: 5000
        })
      }
      await saveRoleSave({ ...this.tableCellSelect, permissionIds: this.permissionIds })
      this.$notify.success({
        title: '菜单分配成功'
      })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
